@charset "utf-8";
@import "iconfont";
@import "reset";
@mixin aImg{
    overflow: hidden;
    width:100%;
    position: relative;
    img{
        position: absolute;
        width: 100%;
        top:-9999px;
        bottom:-9999px;
        left:-9999px;
        right:-9999px;
        margin: auto;
    }
}
.clear{
    clear: both;
}
.index_web{
    width: 100%;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
//  导航栏
    .index_nav{
        width: 100%;
        height: 30px;
        background: #222;
        z-index: 9999;
        position: fixed;
        .BG_bg{
            background: #222222;
        }
        .nav_fluid{
            width: 70%;
            height: 30px;   
            .nav_log{
                width: 150px;
                margin-top: -5px;
                img{
                     width: 100%;
                }
            }
            .nav_hone{
                ul{
                    .active{
                        a{
                            background: #111;
                            color: white;
                        }
                    }
                    li{
                        a:hover{
                            color: #ccc;
                        }
                        .toggle_bg{
                            background: #222222;
                            li a{
                                background: #222;
                                color: #eee;
                                &:hover{
                                    background: #ccc;
                                    color: #666;
                                }
                            }
                        }
                    }
                }
                
            }
        }
    }
//  主体
    .index_cent{
        width: 100%;
        margin-top: 50px;
        position: relative;
//      大图
        .container-fluid{
            width: 100%;
            padding: 0;
            .container-fluid_pic{
                padding-top: 45.62%;
               @include aImg;
               &:hover{
                   background: #fff;
                   opacity: .9;
               }
            }
        }
//      LayaFlash引擎
        .cent_LayaFlash{
            width: 100%;
            margin-bottom: 50px;
            padding-bottom: 30px;
            background: #fbfaf7;
            border-bottom: 1px solid #eaeaee;
            font-size: 0;
            .LayaFlash{
                width: 70%;
                margin: 0 auto;
                 padding-top: 60px;
                .cent_LayaFlash_Flash,.cent_LayaFlash_pic{
                    display: inline-block;
                    margin: 0 auto;
                }
                .cent_LayaFlash_Flash{
                    width: 67.1%;
                    font-size: 16px;
                    >div h2,>div h3{
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap; 
                    }
                    >div h2{
                        color: #0078d7;
                    }
                    >div h3{
                        color: #666666;
                    }
                    .container{
                        margin-top: 30px;
                        .row{
                            .row_son1{
                                 margin-top: 50px;
                                .row_ico_bg,.row_ico_font{
                                    display: inline-block;
                                }
                                .row_ico_bg{
                                    background: #0078d7;
                                    border-radius:8px ;
                                    width: 50px;
                                    height: 50px;
                                    line-height: 50px;
                                    text-align: center;
                                    vertical-align: top;
                                    transition: all 0.8s ease-in-out 0s;
                                    &:hover{
                                            background: #8d8c8c;
                                            transform: rotate(360deg);
                                        }
                                    i{
                                        color: white;
                                        font-size: 40px;
                                    }
                                }
                                .row_ico_font{
                                    width: 200px;
                                    h5{
                                        font-size: 15px;
                                        overflow: hidden;
                                        text-overflow: ellipsis;
                                        white-space: nowrap; 
                                    }
                                    p{
                                        font-size: 13px;
                                        color: #666;
                                        overflow: hidden;
                                        text-overflow: ellipsis;
                                        -webkit-line-clamp: 2;
                                        display: -webkit-box;
                                        -webkit-box-orient:vertical;
                                    }
                                }
                            }
                        }
                    }
                }
                .cent_LayaFlash_pic{
                    width: 32.4%;
                    vertical-align: top;
                    >div{
                        height: 400px;
                        @include aImg;
                    }
                }
            }
        }
//      Layabox 优势
        .cent_LayaFlash_yousi{
            width:70%;
            margin: 0 auto;
            margin-top: 50px;
            font-size: 0;
            margin-bottom: 50px;
            .row_row{
                .yousi_left,.yousi_right{
                    display: inline-block;
                }
                .yousi_left{
                    width: 40%;
                        >div{
                            padding-top: 100%;
                            @include aImg;
                        &:hover{
                            background: white;
                            opacity: .8;
                        }
                    }
                }
                .yousi_right{
                    padding: 0;
                    width: 60%;
                    vertical-align: top;
                    >div h3{
                        color: #8fc31f;
                        font-size: 40px;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap; 
                    }
                    .right_font{
                        padding: 0;
                        margin-top: 10px;
                        &>div {
                            margin-left: 20px;
                            margin-top: 10px;
                           
                            .right_font_font{
                                 border-radius:50% ;
                                 width: 50px;
                                 height: 50px;
                                 background: #8fc31f;
                                 line-height: 50px;
                                 img{
                                     width: 100%;
                                 }
                            }
                        }                 
                         &>div .font_font{
                           font-size: 13px;
                           line-height: 50px;
                           p{
                                color: #666666;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                white-space: nowrap; 
                            }
                        } 
                    }
                }
            }
        }
//      产品家族
        .cent_family{
            width: 100%;
            background: #0079d7;
            padding-top: 100px;
            .family_font{
                text-align: center;
                h2{
                    color: white;
                    font-size: 40px;
                }
            }
            .family_body{
               width: 70%; 
               margin: 0 auto;
               padding-bottom: 80px;
               padding-top: 30px;
               .family_cont{
                   margin-left: 5px;
                   .family_cont_mal{
                       margin-top: 30px;
                        .family_left{
                           width: 20%;
                           .family_pic{
                               width: 65px;
                               height: 65px;
                               border-radius: 8px;
                               position: relative;
                               overflow: hidden;
                               img{
                                   position: absolute;
                                    width: 100%;
                                    top:-9999px;
                                    bottom:-9999px;
                                    left:-9999px;
                                    right:-9999px;
                                    margin: auto;
                               }
                           }
                       }
                       .family_right{
                           .family_fontt{
                               h4,p{
                                   color: white;
                               }
                           }
                        }
                    }
                }
            }
        }
//      引擎游戏
        .cent_game{
            width: 70%;
            .game_font{
                width: 100%;
                 margin-top: 50px;
                .game_font_left{
                    float: left;
                    h3{
                        padding: 0;
                        margin: 0;
                    }
                   
                }
                .game_font_right{
                    float: right;
                    a{
                        text-decoration: none;
                        color: #5f5f5f;
                    }
                }
            }
            .game{
                margin-top: 30px;
                .game_video{
                    width: 40%;
                    .video{
                        padding-top: 50.1%;
                        border-radius:8px ;
                        @include aImg;
                    }
                }
                .game_APP{
                    .APP{
                        .APP_app{
                            text-align: center;
                            .app_pic{
                                width: 65px;
                                height: 65px;
                                border-radius:8px ;
                                overflow: hidden;
                                position: relative;
                                margin: 0 auto;
                                img{
                                    position: absolute;
                                    width: 100%;
                                    top:-9999px;
                                    bottom:-9999px;
                                    left:-9999px;
                                    right:-9999px;
                                    margin: auto;
                                }
                                &:hover{
                                    background: white;
                                    opacity: .8;
                                }
                            }
                            .app_font{
                                p{
                                    color: #2a2a2a;
                                }
                            }
                        }
                    }
                }
            }
        }
//      合作伙伴
        .cent_Cooper{
            width: 100%;
            background: #f4f4f4;
            padding-bottom: 50px;
            .Cooper_font{
                width: 70%;
                margin: 0 auto;
                padding-top: 40px;
                h2{
                    color: #2a2a2a;
                }
                h2::after{
                    content: "(排序不分先后)";
                    font-size: 13px;
                    color: #969696;
                }
            }
            .Cooper_pic{
                width: 70%;
                margin: 0 auto;
                margin-top: 20px;
                .pic_img{
                    .img_img{
                        width: 100px;
                        height: 50px;
                        border-radius:5px ;
                        border: 1px solid #dddddd;
                        overflow: hidden;
                        position: relative;
                        cursor: pointer;
                        img{
                            position: absolute;
                            width: 100%;
                            top:-9999px;
                            bottom:-9999px;
                            left:-9999px;
                            right:-9999px;
                            margin: auto;
                        }
                        &:hover{
                            background: white;
                            opacity: .8;
                        }

                    }
                }
            }
        }
    }
//  版权
    .index_copy{
        width: 100%;
        height: 100px;
        background: #3b3b3b;
        overflow:hidden ;
        position: relative;
        .copy_left{
            width: 70%;
            margin: 0 auto;
            margin-top: 20px;
            .left_son1{
                ul{
                    li{
                        display: inline-block;
                        margin-right: 15px;
                        a{
                            color: #a1a3ab;
                            &:hover{
                                color: white;
                            }
                        }
                    }
                }
            }
            .left_son2{
                margin-top: 15px;
                p{
                    color: #a1a3ab;
                }
            }
        }
        .copy_right{
            position: absolute;
            right: 18%;
            top: 30%;
            ul{
                li{
                    margin-left: 10px;
                    display: inline-block;
                    div{
                        width: 40px;
                        height: 40px;
                        border-radius:50% ;
                        background: #d8d8e0;
                        line-height: 40px;
                        text-align: center;
                        i{
                            color: #4c4c52;
                            font-size: 25px;
                            display: block;
                            cursor: pointer;
                        }
                    }
                }
            }
        }
    }
}
//媒体查询
@media only screen and (max-width:768px){
    .index_web{
        width: 100%;
        .index_nav{
           .nav_fluid{
               width: 100%;
           } 
        }
        .index_cent{
        width: 100%;
            .cent_LayaFlash{
                width: 100%;
                .LayaFlash{
                    width: 100%;
                    .cent_LayaFlash_Flash{
                        &>div h2,&>div h3{
                            font-size: 20px;
                        }
                        row{
                            .row_son1{
                                width: 100%;
                                margin: 0;
                                padding: 0;
                               .row_ico_bg{
                                   width: 100%;
                               }
                               .row_ico_font{
                                    width: 100%;
                                   h2,h3{
                                        overflow: hidden;
                                        text-overflow: ellipsis;
                                        white-space: nowrap; 
                                   }
                                   
                               } 
                            }
                        }
                        
                    }
                }
            }
            .cent_LayaFlash_yousi{
                .row_row{
                    
                    .yousi_left{
                            width: 100%;
                    }
                }
            }
            .cent_family{
                width: 100%;
                .family_font{
                    h2{
                        font-size: 30px;
                    }
                }
                 .family_body{
                    width: 100%;
                    .family_cont{
                          width: 100%;
                        .family_left{
                          width: 100%;
                          margin-top: 10px;
                          text-align: center;
                          .family_pic{
                              width: 25%;
                              img{
                                  width: 100%;
                              }
                          }          
                        }
                        .family_right{
                            .family_fontt{
                                width: 100%;
                            }
                        }
                    }
                }
            }
            .cent_game{
                width: 100%;
                .game_font{
                    .game_font_left{
                        width: 95%;
                        h3{
                            font-size: 20px;
                        }
                        
                    }
                    .game_font_right{
                        display: none;
                    }
                }
                .game{
                    width: 100%;
                    margin: 0 auto;
                    margin-top: 30px;
                    .game_video{
                        width:80%;
                        margin: 0 auto;
                        .video{
                            width: 100%;
                        }
                    }
                    .game_APP{
                        width: 100%;
                        .APP{
                            text-align: center;
                            .APP_app{
                                margin-top: 10px;
                                
                                .app_pic{
                                    text-align: center;
                                }
                                .app_font{
                                }
                            }
                        }
                    }
                }
            }
            .cent_Cooper{
                width: 100%;
                .Cooper_font{
                    width: 100%;
                    h2{
                        font-size: 20px;
                    }
                }
                .Cooper_pic{
                    width: 100%;
                    margin-top: 10px;
                    .pic_img{
                        margin-top: 10px;
                        .img_img{
                            
                        }
                    }
                }
            }
        }
        .index_copy{
            .copy_right{
                display: none;
            }
        }
    }
}
